<div class="pop_content subscribe-btn">
  <p> Follow related tags: </p>
  <%= form_with remote: true, url: '/subscribe/multiple/tag' do |f| %>
    <input type="hidden" name="return_to" class="subscription-popover-redirect" value="<%= request.fullpath %>" />
    <% tags&.each_with_index do |tag, i| %>
      <div class="form-check">
        <label class="form-check-label">
          <input type="checkbox" id="<%= tag.id %>" name="tagnames[]" value="<%= tag.name %>" <% if i == 0 || current_user&.following(tag.name) %> checked <% end %> />
          <span class="<% if tag.name.include?(':') %> badge badge-primary <% else %> badge badge-secondary <% end %>" style="margin-left: 3px; margin-right: 10px; display: inline-block;"> 
            <%= tag.name %>
          </span>
        </label>
      </div>
      <% end %>
    <% if current_user %>
      <p><%= f.submit 'Follow', id: "subscribe", class: "btn btn-primary btn-sm" %></p>
    <% else %>
      <p><a id="subscription" class="btn btn-primary btn-sm fa-white" onClick="require_login_and_redirect_to('/subscribe/multiple/tag/' + getCheckedTags())">Follow</a></p>
    <% end %>
  <% end %>
</div>
<script>
function getCheckedTags() {
  var checkedTags = $('.subscribe-btn form .form-check input:checked'); // get elements
  checkedTags = checkedTags.map(function(i, t){return $(t).val()}); // get strings
  checkedTags = $.unique(checkedTags).toArray(); // uniques
  return checkedTags.join(',');
}
</script>
<style>
.small_heading {
  font-style: italic;
  color: #004d80;
}
</style> 
